<template>
  <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
    <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column>
    <el-table-column prop="name" label="用户名"></el-table-column>
    <el-table-column prop="userUnit" label="所属部门" :filters="userUnit" :filter-method="filterHandler"></el-table-column>
    <el-table-column prop="date" label="注册时间"></el-table-column>
    <el-table-column prop="userType" label="权限" :filters="useType" :filter-method="filterHandler"></el-table-column>
    <el-table-column prop="toolType" label="用户分类" :filters="toolType" :filter-method="filterHandler"></el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" @click="handleEdit(scope.$index)">编辑
        </el-button>
        <el-button type="primary" class="red"
                   @click="handleDelete(tableData[scope.$index].userid,scope.$index)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="bottom">
    <el-button type="primary" @click="handleAdd()">新增</el-button>
    <el-button type="primary" @click="handleExit()">返回</el-button>
  </div>
  <!-- 新增表 -->
  <div>
    <el-dialog v-model="addFormVisible" custom-class="detail-progress-modal" :modal="false"
               :draggable="true" title="用户新增表" @close="closeModal">
      <div class="table-item">
        <formItem title="用户名*">
          <template v-slot:right>
            <el-input
                v-model="addUser.name"
                placeholder="请输入用户名"
                type="text"
            />
          </template>
        </formItem>
        <formItem title="真实姓名">
          <template v-slot:right>
            <el-input
                v-model="addUser.trueName"
                placeholder="请输入真实姓名"
                type="text"
            />
          </template>
        </formItem>
        <formItem title="所属部门">
          <template v-slot:right>
            <el-select
                v-model="addUser.userUnit"
                popper-class="big-screnn-popper"
                placeholder="请选择所属部门"
                allow-create
                clearable
                filterable
            >
              <el-option
                  v-for="item in userUnit"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
              />
            </el-select>
          </template>
        </formItem>
      </div>
      <div class="table-item">
        <formItem title="所属区镇">
          <template v-slot:right>
            <el-select
                v-model="addUser.userXzq"
                popper-class="big-screnn-popper"
                placeholder="请选择所属区镇"
                allow-create
                clearable
                filterable
            >
              <el-option
                  v-for="item in cityOption"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
              />
            </el-select>
          </template>
        </formItem>
        <formItem title="用户权限">
          <template v-slot:right>
            <el-select
                v-model="addUser.userType"
                popper-class="big-screnn-popper"
                placeholder="请选择用户权限"
                allow-create
                clearable
                filterable
            >
              <el-option
                  v-for="item in useType"
                  :key="item.value"
                  :label="item.value"
                  :value="item.index"
              />
            </el-select>
          </template>
        </formItem>
        <formItem title="用户类型">
          <template v-slot:right>
            <el-select
                v-model="addUser.toolType"
                popper-class="big-screnn-popper"
                placeholder="请选择用户类型"
                allow-create
                clearable
                filterable
            >
              <el-option
                  v-for="item in toolType"
                  :key="item.value"
                  :label="item.value"
                  :value="item.index"
              />
            </el-select>
          </template>
        </formItem>
      </div>
      <template #footer>
        <div class="marcker-footer">
          <div class="footer-btn">
            <el-button type="primary" @click="closeModal">取消</el-button>
            <el-button type="success" @click="confirmModal">确定</el-button>
          </div>
        </div>
      </template>
      <div class="tips-text">
        <span>注:移动端用户名必须为手机号</span>
      </div>
    </el-dialog>
  </div>
  <!-- 编辑表 -->
  <div>
    <el-dialog v-model="editFormVisible" custom-class="detail-progress-modal" :modal="false"
               :draggable="true" title="用户编辑表" @close="closeModal">
      <div class="table-item">
        <formItem title="用户名">
          <template v-slot:rightText>
            <span>{{ editUser.name }}</span>
          </template>
        </formItem>
        <formItem title="真实姓名">
          <template v-slot:right>
            <el-input
                v-model="editUser.trueName"
                placeholder="请输入真实姓名"
                type="text"
            />
          </template>
        </formItem>
        <formItem title="所属部门">
          <template v-slot:right>
            <el-select
                v-model="editUser.userUnit"
                popper-class="big-screnn-popper"
                placeholder="请选择所属部门"
                allow-create
                clearable
                filterable
            >
              <el-option
                  v-for="item in userUnit"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
              />
            </el-select>
          </template>
        </formItem>
      </div>
      <div class="table-item">
        <formItem title="所属区镇">
          <template v-slot:right>
            <el-select
                v-model="editUser.userXzq"
                popper-class="big-screnn-popper"
                placeholder="请选择所属区镇"
                allow-create
                clearable
                filterable
            >
              <el-option
                  v-for="item in cityOption"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
              />
            </el-select>
          </template>
        </formItem>
        <formItem title="用户权限">
          <template v-slot:right>
            <el-select
                v-model="editUser.userType"
                popper-class="big-screnn-popper"
                placeholder="请选择用户权限"
                allow-create
                clearable
                filterable
            >
              <el-option
                  v-for="item in useType"
                  :key="item.value"
                  :label="item.value"
                  :value="item.index"
              />
            </el-select>
          </template>
        </formItem>
        <formItem title="用户类型">
          <template v-slot:right>
            <el-select
                v-model="editUser.toolType"
                popper-class="big-screnn-popper"
                placeholder="请选择用户类型"
                allow-create
                clearable
                filterable
            >
              <el-option
                  v-for="item in toolType"
                  :key="item.value"
                  :label="item.value"
                  :value="item.index"
              />
            </el-select>
          </template>
        </formItem>
      </div>
      <template #footer>
        <div class="marcker-footer">
          <div class="footer-btn">
            <el-button type="primary" @click="closeModal">取消</el-button>
            <el-button type="success" @click="editConfirm">确定</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script lang="ts">
import {defineComponent, getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import formItem from "@/components/commonFomItem/index.vue";
import {ElNotification} from "element-plus";
import type {TableColumnCtx} from 'element-plus/es/components/table/src/table-column/defaults'
import Data from "../../../../../public/config/data.json"

export default defineComponent({
  name: "index",
  components: {formItem},
  setup() {
    interface User {
      userUnit: string
      userType: string
      toolType: string
    }

    const property = ref('')
    const {appContext} = getCurrentInstance();
    const router = useRouter();
    const userType = localStorage.getItem("userType")
    const userLocation = localStorage.getItem("userLocation")
    const tableData = reactive([])
    const addUser = reactive({
      name: '',
      trueName: '',
      userUnit: '',
      userXzq: '',
      userType: '',
      toolType: ''
    })
    const editUser = reactive({
      name: '',
      passWord: '',
      trueName: '',
      userUnit: '',
      userXzq: '',
      userType: '',
      toolType: '',
      id: ''
    })
    watch(()=>property.value,()=>{
      reload()
    })
    //筛选
    const filterHandler = (value: string, row: User, column: TableColumnCtx<User>) => {
      property.value = column['property']
      return row[property.value] === value
    }
    //用户权限
    const useType = reactive(Data).useType
    //用户端
    const toolType = reactive(Data).toolType
    //下属部门
    const userUnit = reactive(Data).userUnit
    //所属区镇
    const cityOption = reactive(Data).selectTown
    //获取当前时间
    const getCurrentTime = () => {
      let date = new Date();
      //年
      let year = date.getFullYear().toString();
      //月份是从0月开始获取的，所以要+1;
      let month = ''
      if ((date.getMonth() + 1) < 10) {
        month = '0' + (date.getMonth() + 1).toString()
      } else {
        month = (date.getMonth() + 1).toString()
      }
      //日
      let day = date.getDate().toString();
      return year + '年' + month + '月' + day + '日'
    }
    //刷新数据
    const reload = () => {
      if (userType === '0') {
        tableData.length = 0
        appContext.config.globalProperties.axios({
          url: `api/search/allUser`,
          method: 'post',
        }).then((response) => {
          response.data.forEach(item => {
            let object = {
              name: '',
              userUnit: '',
              passWord: '',
              userType: '',
              date: '',
              userid: '',
              toolType: '',
              trueName: '',
              userXzq: '',
              usertype: '',
              tooltype: ''
            }
            object.userid = item.userid
            object.name = item.username
            object.userUnit = item.userunit
            object.userType = useType[item.usertype].value
            object.date = item.registertime
            object.toolType = toolType[item.tooltype].value
            object.trueName = item.usertruename
            object.userXzq = item.userxzq
            object.usertype = item.usertype
            object.tooltype = item.tooltype
            object.passWord = item.userpassword
            tableData.push(object)
          })
        })
      } else if (userType === '1') {
        tableData.length = 0
        appContext.config.globalProperties.axios({
          url: `api/search/locationUser`,
          method: 'post',
          transformRequest: [function () {
            let oMyForm = new FormData();
            oMyForm.append("userLocation", userLocation);
            return oMyForm;
          }],
        }).then((response) => {
          response.data.forEach(item => {
            let object = {
              name: '',
              userUnit: '',
              userType: '',
              date: '',
              userid: '',
              toolType: '',
              trueName: '',
              userXzq: '',
              usertype: '',
              tooltype: '',
              passWord: ''
            }
            object.userid = item.userid
            object.name = item.username
            object.userUnit = item.userunit
            object.userType = useType[item.usertype].value
            object.date = item.registertime
            object.toolType = toolType[item.tooltype].value
            object.trueName = item.usertruename
            object.userXzq = item.userxzq
            object.usertype = item.usertype
            object.tooltype = item.tooltype
            object.passWord = item.userpassword
            tableData.push(object)
          })
        })

      } else {
        tableData.length = 0
        appContext.config.globalProperties.axios({
          url: `api/search/someUser`,
          method: 'post',
          transformRequest: [function () {
            let oMyForm = new FormData();
            oMyForm.append("userLocation", userLocation);
            oMyForm.append("toolType", '0');
            return oMyForm;
          }]
        }).then((response) => {
          response.data.forEach(item => {
            let object = {
              name: '',
              userUnit: '',
              userType: '',
              date: '',
              userid: '',
              toolType: '',
              trueName: '',
              userXzq: '',
              usertype: '',
              tooltype: '',
              passWord: ''
            }
            object.userid = item.userid
            object.name = item.username
            object.userUnit = item.userunit
            object.userType = useType[item.usertype].value
            object.date = item.registertime
            object.toolType = toolType[0].value
            object.trueName = item.usertruename
            object.userXzq = item.userxzq
            object.usertype = item.usertype
            object.tooltype = '0'
            object.passWord = item.userpassword
            tableData.push(object)
          })
        })
      }
    }
    const addFormVisible = ref(false)
    const editFormVisible = ref(false)
    const handleDelete = (id, index) => {
      tableData.splice(index, 1)
      appContext.config.globalProperties.axios({
        url: `api/delete/user`,
        method: 'post',
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("id", id);
          return oMyForm;
        }],
      })
    }
    const handleEdit = (index) => {
      editFormVisible.value = true
      editUser.name = tableData[index].name
      editUser.passWord = tableData[index].passWord
      editUser.userType = tableData[index].usertype
      editUser.userUnit = tableData[index].userUnit
      editUser.userXzq = tableData[index].userXzq
      editUser.toolType = tableData[index].tooltype
      editUser.trueName = tableData[index].trueName
      editUser.id = tableData[index].userid
    }
    const handleExit = () => {
      router.push({
        name: "landpoint",
      })
    }
    const handleAdd = (() => {
      addFormVisible.value = true
    })
    const closeModal = (() => {
      editFormVisible.value = false
      addFormVisible.value = false
    })
    const confirmModal = (() => {
      appContext.config.globalProperties.axios({
        url: `api/insert/user`,
        method: 'post',
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("name", addUser.name);
          oMyForm.append("trueName", addUser.trueName);
          oMyForm.append("unit", addUser.userUnit);
          oMyForm.append("location", addUser.userXzq);
          oMyForm.append("userType", addUser.userType);
          oMyForm.append("registerTime", getCurrentTime());
          oMyForm.append("toolType", addUser.toolType);
          return oMyForm;
        }],
      }).then(() => {
        reload()
        ElNotification({
          title: "新增用户数据",
          message: "新增用户数据成功",
          type: "success",
          position: "top-left",
          offset: 300,
        });
        addUser.name = ''
        addUser.userUnit = ''
        addUser.userType = ''
        addUser.userXzq = ''
        addUser.toolType = ''
        addUser.trueName = ''
        addFormVisible.value = false
      })
    })
    const editConfirm = (() => {
      appContext.config.globalProperties.axios({
        url: `api/update/user`,
        method: 'post',
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("name", editUser.name);
          oMyForm.append("passWord", editUser.passWord);
          oMyForm.append("trueName", editUser.trueName);
          oMyForm.append("unit", editUser.userUnit);
          oMyForm.append("location", editUser.userXzq);
          oMyForm.append("userType", editUser.userType);
          oMyForm.append("toolType", editUser.toolType);
          oMyForm.append("id", editUser.id);
          return oMyForm;
        }],
      }).then(() => {
        reload()
        ElNotification({
          title: "编辑用户数据",
          message: "编辑用户数据成功",
          type: "success",
          position: "top-left",
          offset: 300,
        });
        editFormVisible.value = false
      })
    })
    onMounted(() => {
      if (!sessionStorage.getItem('loginName') || !localStorage.getItem('loginName')) {
        localStorage.clear()
        router.push({
          name: "landpointtc",
        })
      }
      reload()
    })
    return {
      tableData,
      handleDelete,
      handleAdd,
      addFormVisible,
      editFormVisible,
      closeModal,
      useType,
      toolType,
      addUser,
      userUnit,
      cityOption,
      getCurrentTime,
      confirmModal,
      reload,
      handleEdit,
      editUser,
      editConfirm,
      handleExit,
      router,
      filterHandler,
      userType,
      userLocation,
      property
    }
  }
})
</script>

<style lang="scss">
.table-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

  .right-text[data-v-b659a5a2] {
    width: 10.04167vw
  }

  .right {
    color: #e9e9e9;

    .el-input__wrapper {
      background-color: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(245, 248, 255, 0.25);
    }
  }

  //.common-form-item{
  //  .right{
  //    color: #e9e9e9;
  //    .el-input__wrapper {
  //      background-color: rgba(0, 0, 0, 0.2);
  //      border: 1px solid rgba(245, 248, 255, 0.25);
  //    }
  //  }
  //}

}

.tips-text {
  margin-left: 30px;
  color: #e9e9e9;
}

.bottom {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
